<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>单页简历模板</title>
  <style>
    /* 基础样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Arial', 'Microsoft YaHei', sans-serif;
    }
    
    body {
      background-color: #f5f5f5;
      color: #333;
      line-height: 1.5;
      font-size: 14px;
    }
    
    .container {
      max-width: 800px;
      margin: 20px auto;
      background-color: #fff;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
      padding: 25px;
    }
    
    /* 头部样式 */
    header {
      text-align: center;
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid #eee;
    }
    
    .name {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 5px;
      color: #2c3e50;
    }
    
    .title {
      font-size: 16px;
      color: #7f8c8d;
      margin-bottom: 10px;
    }
    
    .contact-info {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px;
      font-size: 13px;
    }
    
    .contact-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    
    /* 主要内容样式 */
    main {
      display: grid;
      grid-template-columns: 65% 35%;
      gap: 20px;
    }
    
    @media (max-width: 600px) {
      main {
        grid-template-columns: 1fr;
      }
    }
    
    .section {
      margin-bottom: 15px;
    }
    
    .section-title {
      font-size: 16px;
      color: #2c3e50;
      margin-bottom: 10px;
      padding-bottom: 5px;
      border-bottom: 1px solid #eee;
      position: relative;
    }
    
    .section-title::after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      width: 40px;
      height: 2px;
      background-color: #3498db;
    }
    
    /* 经验样式 */
    .experience-item, .education-item {
      margin-bottom: 12px;
    }
    
    .item-title {
      font-weight: 600;
      font-size: 15px;
      margin-bottom: 3px;
      color: #2c3e50;
    }
    
    .item-subtitle {
      font-size: 14px;
      color: #3498db;
      margin-bottom: 3px;
    }
    
    .item-date {
      font-size: 13px;
      color: #7f8c8d;
      margin-bottom: 5px;
    }
    
    .item-description {
      font-size: 13px;
      text-align: justify;
    }
    
    .item-achievements {
      margin-top: 5px;
      padding-left: 15px;
      font-size: 13px;
    }
    
    .item-achievements li {
      margin-bottom: 3px;
    }
    
    /* 技能样式 */
    .skills-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    
    .skill-item {
      background-color: #f0f0f0;
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 12px;
    }
    
    /* 项目经验样式 */
    .project-item {
      margin-bottom: 12px;
    }
    
    /* 打印样式 */
    @media print {
      body {
        background-color: #fff;
        font-size: 12px;
      }
      
      .container {
        box-shadow: none;
        margin: 0;
        padding: 15px;
        max-width: 100%;
      }
      
      .name {
        font-size: 20px;
      }
      
      .title {
        font-size: 14px;
      }
      
      .section-title {
        font-size: 14px;
      }
      
      .item-title {
        font-size: 13px;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <h1 class="name">张三</h1>
      <p class="title">产品经理</p>
      <div class="contact-info">
        <div class="contact-item">
          <span>📧</span>
          <span>zhangsan@example.com</span>
        </div>
        <div class="contact-item">
          <span>📱</span>
          <span>13812345678</span>
        </div>
        <div class="contact-item">
          <span>📍</span>
          <span>北京市海淀区</span>
        </div>
        <div class="contact-item">
          <span>🔗</span>
          <span>linkedin.com/in/zhangsan</span>
        </div>
      </div>
    </header>
    
    <main>
      <div class="left-column">
        <section class="section">
          <h2 class="section-title">个人简介</h2>
          <p class="item-description">
            拥有5年产品经理经验，专注于移动应用和SaaS产品开发。擅长用户需求分析、产品规划和跨团队协作。主导过多个从0到1的产品，具有出色的沟通能力和解决问题的能力。熟悉敏捷开发流程，能够高效地与设计、开发和市场团队协作。
          </p>
        </section>
        
        <section class="section">
          <h2 class="section-title">工作经历</h2>
          <div class="experience-item">
            <h3 class="item-title">高级产品经理</h3>
            <p class="item-subtitle">字节跳动</p>
            <p class="item-date">2020年6月 - 至今</p>
            <p class="item-description">
              负责企业协作工具产品的规划和迭代，管理产品生命周期，协调多个跨职能团队。
            </p>
            <ul class="item-achievements">
              <li>主导开发新一代协作工具，用户增长率达到150%</li>
              <li>优化产品转化漏斗，提高转化率30%</li>
              <li>建立完善的数据分析体系，指导产品决策</li>
            </ul>
          </div>
          
          <div class="experience-item">
            <h3 class="item-title">产品经理</h3>
            <p class="item-subtitle">腾讯</p>
            <p class="item-date">2018年3月 - 2020年5月</p>
            <p class="item-description">
              负责社交产品的功能设计和用户体验优化，参与产品从0到1的全过程。
            </p>
            <ul class="item-achievements">
              <li>设计并实施A/B测试，优化关键功能的用户体验</li>
              <li>通过用户调研和竞品分析，提出差异化产品策略</li>
            </ul>
          </div>
          
          <div class="experience-item">
            <h3 class="item-title">产品助理</h3>
            <p class="item-subtitle">百度</p>
            <p class="item-date">2016年7月 - 2018年2月</p>
            <p class="item-description">
              协助产品经理进行需求分析、竞品研究和用户调研，参与产品规划和迭代。
            </p>
          </div>
        </section>
        
        <section class="section">
          <h2 class="section-title">项目经验</h2>
          <div class="project-item">
            <h3 class="item-title">企业协作平台重构</h3>
            <p class="item-date">2021年1月 - 2021年10月</p>
            <p class="item-description">
              主导企业协作平台的全面重构，优化用户体验和性能，提高团队协作效率。
            </p>
            <ul class="item-achievements">
              <li>重新设计核心工作流程，减少用户操作步骤40%</li>
              <li>引入实时协作功能，提高团队协作效率50%</li>
            </ul>
          </div>
          
          <div class="project-item">
            <h3 class="item-title">移动端社交应用开发</h3>
            <p class="item-date">2019年3月 - 2019年12月</p>
            <p class="item-description">
              负责移动端社交应用的产品设计和开发，从需求分析到上线全程参与。
            </p>
            <ul class="item-achievements">
              <li>应用上线3个月内获得100万用户</li>
              <li>用户留存率比行业平均水平高20%</li>
            </ul>
          </div>
        </section>
      </div>
      
      <div class="right-column">
        <section class="section">
          <h2 class="section-title">教育背景</h2>
          <div class="education-item">
            <h3 class="item-title">工商管理硕士</h3>
            <p class="item-subtitle">北京大学</p>
            <p class="item-date">2014 - 2016</p>
          </div>
          
          <div class="education-item">
            <h3 class="item-title">计算机科学学士</h3>
            <p class="item-subtitle">清华大学</p>
            <p class="item-date">2010 - 2014</p>
          </div>
        </section>
        
        <section class="section">
          <h2 class="section-title">专业技能</h2>
          <div class="skills-list">
            <span class="skill-item">产品规划</span>
            <span class="skill-item">用户研究</span>
            <span class="skill-item">需求分析</span>
            <span class="skill-item">原型设计</span>
            <span class="skill-item">数据分析</span>
            <span class="skill-item">敏捷开发</span>
            <span class="skill-item">项目管理</span>
            <span class="skill-item">团队协作</span>
            <span class="skill-item">Axure</span>
            <span class="skill-item">Figma</span>
            <span class="skill-item">SQL</span>
            <span class="skill-item">Python</span>
          </div>
        </section>
        
        <section class="section">
          <h2 class="section-title">证书</h2>
          <div class="item-description">
            <p>产品经理专业认证 (PMP)</p>
            <p>谷歌数据分析专业证书</p>
            <p>敏捷开发Scrum Master认证</p>
          </div>
        </section>
        
        <section class="section">
          <h2 class="section-title">语言能力</h2>
          <div class="item-description">
            <p>中文（母语）</p>
            <p>英语（流利）</p>
          </div>
        </section>
        
        <section class="section">
          <h2 class="section-title">兴趣爱好</h2>
          <div class="skills-list">
            <span class="skill-item">摄影</span>
            <span class="skill-item">旅行</span>
            <span class="skill-item">阅读</span>
            <span class="skill-item">篮球</span>
          </div>
        </section>
      </div>
    </main>
  </div>
</body>
</html>